<template>
  <a-modal
    width="60vw"
    :footer="false"
    unmount-on-close
    :mask-closable="false"
    v-model:visible="visible"
    title="查询记录"
    @close="handleClose"
  >
    <div class="companyName">{{ bussinessInfo.companyName }}</div>
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam.data" @loadData="loadData" />
    <table-index :table="table" @loadData="loadData">
      <template #table-summary>
        <div>
          有效查询总数：
          <span class="num">{{ bussinessInfo.validQueryCount }}</span>
          条
        </div>
      </template>
      <template #timeAndOperator="{ record }">
        <div>{{ record.queryTime }} | {{ record.createUserName }}</div>
      </template>
      <template #queryResult="{ record }">
        <div v-if="record.unHandleCount || record.handleCount || record.handleUnPayCount || record.eliminatedCount"
          >未处理：{{ record.unHandleCount }} | 已处理：{{ record.handleCount }} | 已处理未缴费：{{ record.handleUnPayCount }} | 已消网：{{
            record.eliminatedCount
          }}</div
        >
        <div v-else>无违章记录</div>
      </template>
    </table-index>
  </a-modal>
</template>

<script setup lang="ts">
  import { computed, reactive, ref } from 'vue'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { useExport } from '@/hooks/list'
  import { usePageDict } from '@/hooks/useDict'
  import { getViolationRecordList, exportQueryRecord, queryRecordValidQueryCount } from '@/api/asset/carViolation'

  const dict = usePageDict('carviolationDict')

  // 查询条件；
  const searchList = computed(() => {
    return [
      { label: '车牌号', prop: 'licenseNoLike', type: 'a-input' },
      {
        label: '查询时间',
        prop: 'dateRange',
        type: 'i-range-picker',
        attrs: {
          showTime: true,
          timePickerProps: {
            defaultValue: ['00:00:00', '23:59:59'],
          },
        },
        change: (value = []) => {
          queryParam.data.queryTimeStart = value[0]
          queryParam.data.queryTimeEnd = value[1]
        },
      },
      {
        label: '违章状态',
        prop: 'statusList',
        type: 'a-select',
        options: dict.queryRecordStatus,
        attrs: {
          multiple: true,
        },
      },
    ]
  })
  // 企业名称、查询总数
  const bussinessInfo = reactive({
    validQueryCount: 0,
    companyName: '',
  })
  const initQueryParam = {
    dateRange: [],
    queryTimeStart: '',
    queryTimeEnd: '',
    accountId: '',
  }
  const queryParam = reactive({ data: { ...initQueryParam } })
  // 列表接口调用
  const loadData = (page) => {
    // 查询违章有效查询总数
    queryRecordValidQueryCount(queryParam.data).then(({ result }) => (bussinessInfo.validQueryCount = result.validQueryCount))
    // 查询列表
    const fn = useFetchTableDataApi(table, queryParam.data, getViolationRecordList)
    fn(page)
  }

  // table 配置
  const table = useTable({
    columns: [
      { title: '车牌号', dataIndex: 'licenseNo', width: '150' },
      { title: '数据查询时间及操作人', slotName: 'timeAndOperator', width: '330' },
      { title: '查询结果', slotName: 'queryResult' },
    ],
    buttons: [
      {
        mode: 'export',
        label: '导出',
        type: 'primary',
        permission: 'svms:asstes:violation:query.query.export',
        method: () => handleExport(),
      },
    ],
    tableLoading: false,
  })

  // 导出事件
  const handleExport = () => {
    useExport(exportQueryRecord, queryParam.data)
  }

  // 弹窗
  const visible = ref(false)
  // 关闭弹窗
  const handleClose = () => {
    visible.value = false
    queryParam.data = { ...initQueryParam }
    bussinessInfo.validQueryCount = 0
    bussinessInfo.companyName = ''
  }
  const open = (options: any) => {
    bussinessInfo.companyName = options.companyName
    queryParam.data.accountId = options.accountId
    visible.value = true
    loadData(1)
  }

  defineExpose({
    open,
  })
</script>

<style scoped lang="less">
  .num {
    color: #1890ff;
  }
  .companyName {
    font-weight: 600;
    font-size: 20px;
    color: #1d2129;
    background: #f7f8fa;
    padding: 20px;
    margin-bottom: 20px;
  }
</style>
